<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="box"  width="800" height="800"></canvas>
    <script type="text/javascript">
        var box=document.getElementById("box");
        var pen=box.getContext("2d");
        var loc=location.href;
        var num=loc.lastIndexOf("#");
        var lv=parseInt(loc.substring(num+1));
        var time=0;
        var wait=[1,2,3,4,5,6,7,8];
        var zhuan=[["",0],["",90],["",180],["",270]];
        function run(){
            pen.clearRect(0,0,box.width,box.height/2);
            pen.beginPath();
            pen.arc(200,200,50,0,Math.PI*2);
            pen.fillStyle="black";
            pen.fill();
            pen.fillText(lv,200,200);
            pen.globalCompositeOperation="xor";
            pen.closePath();
            pen.stroke();
            for(var i= 0;i<zhuan.length;i++){
                pen.beginPath();
                pen.save();
                pen.translate(200,200);
                pen.rotate(Math.PI/180*zhuan[i][1]+time*Math.PI/180);
                pen.strokeStyle="black";
                pen.moveTo(0,-50);
                pen.lineTo(0,-140);
                pen.lineWidth="5";
                pen.stroke();
                pen.closePath();
                pen.beginPath();
                pen.arc(0,-150,10,0,Math.PI*2);
                pen.fillStyle="#000";
                pen.font="15px 微软雅黑";
                pen.textAlign="center";
                pen.textBaseline="middle";
                pen.fillText(zhuan[i][0],0,-150);
                pen.globalCompositeOperation="xor";
                pen.fill();
                pen.restore();
                pen.stroke();
                pen.closePath();
            }
        }
        setInterval(function(){
            time++;
            run();
        },10);
       function waitter(){
           for(var i=0;i<wait.length;i++){
               pen.beginPath();
               pen.arc(200,450+30*i,10,0,Math.PI*2);
               pen.fillStyle="#000";
               pen.fill();
               pen.font="15px 微软雅黑";
               pen.textAlign="center";
               pen.textBaseline="middle";
               pen.strokeStyle="white";
               pen.strokeText(wait.length-i,200,450+30*i);
               pen.closePath();
           }
       }
        waitter();
        box.onclick=function(){
            pen.clearRect(0,400,800,400);
            if(wait.length>0){
                var m=wait.pop();
                zhuan.push([m,-time+180]);
                waitter();
            }else{
                alert("过关");
                window.open("index.html#"+(lv+1));
            }
        }
    </script>
</body>
</html>